<template>
  <Dialog
    :title="dialogTitle"
    :model-value="dialogVisible"
    :width="width"
    :top="'5vh'"
    append-to-body
    class="pay-dialog"
    @close="
      () => {
        emit('close')
      }
    "
  >
    <el-container v-loading="submitLoading || loading">
      <el-aside class="aside">
        <el-scrollbar :max-height="maxHeight" class="pr-20px">
          <div
            class="payment-item"
            :class="{
              'payment-item-active': nowPaymentIndex == index || item.payStatus,
              'hidden!': item.classify == 'change'
            }"
            v-for="(item, index) in state.paymentMap"
            :key="index"
            @click="selectPayMent(index)"
          >
            <el-image :src="item.icon" class="icon ml-10px" />
            <!-- <div class="ml-10px custom-text-18"> {{ item.classiName }}</div> -->
            <el-text class="custom-text-18 ml-10px!" truncated> {{ item.classiName }}</el-text>

            <div class="virtual_san" v-if="item.payStatus"></div>
            <div class="virtual_dui custom-text-18" v-if="item.payStatus">✓</div>
          </div>
        </el-scrollbar>
      </el-aside>
      <el-main class="main pos-relative">
        <div class="meton-mask cursor-not-allowed z-1" v-if="!nowPayment.usable"></div>
        <el-row class="payment-info">
          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
            <div class="text-center">
              <div class="custom-text-24 c-[var(--el-color-primary)]!"
                >￥{{ fenToYuan(state.orderInfo.price.totalPrice) }}</div
              >
              <div class="custom-text-18">订单金额</div>
            </div>
          </el-col>
          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
            <div class="text-center">
              <div class="custom-text-24 c-[var(--el-color-primary)]!"
                >￥{{ fenToYuan(state.orderInfo.price.paidPrice) }}</div
              >
              <div class="custom-text-18">已付金额</div>
            </div>
          </el-col>
          <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
            <div class="text-center">
              <div class="custom-text-24 c-[var(--el-color-primary)]!"
                >￥{{ fenToYuan(state.orderInfo.price.payPrice) }}</div
              >
              <div class="custom-text-18">待支付金额</div>
            </div>
          </el-col>
          <el-divider border-style="dashed" class="m-y-0px!" />
          <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
            <div class="text-center">
              <div class="custom-text-16"
                >欠款金额
                <span class="c-[var(--el-color-primary)]!"
                  >￥{{ fenToYuan(state.orderInfo.price.arrearsPrice) }}</span
                ></div
              >
            </div>
          </el-col>
          <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
            <div class="text-center">
              <div class="custom-text-16"
                >优惠金额
                <span class="c-[var(--el-color-primary)]!"
                  >￥{{ fenToYuan(state.orderInfo.price.givePrice) }}</span
                >
              </div>
            </div>
          </el-col>
        </el-row>
        <template v-if="JSON.stringify(nowPayment) != '{}'">
          <div
            v-if="nowPayment.classify != 'coupon'"
            class="payment-operation"
            :class="{ 'flex-1': !barCode.visible }"
          >
            <div>
              <div class="mt-10px">
                <!-- 储值卡 换购的回显 禁止输入 -->
                <el-input
                  v-model="nowPayment.payPrice"
                  disabled
                  v-if="operationOrtherLogic.includes(nowPayment.classify)"
                  :formatter="(value: any) => verifyNumberIntegerAndFloat(value)"
                  class="payment-input custom-text-44"
                  ref="inputRef"
                >
                  <template #prepend>
                    <div class="flex items-center">
                      <el-image :src="collection" class="collection-icon" />
                      <span class="custom-text-22 ml-5px">{{ inputLabel }}</span>
                    </div>
                  </template>
                </el-input>
                <el-input
                  v-model="nowPayment.payPrice"
                  :disabled="nowPayment.payStatus"
                  v-else-if="nowPayment.classify == 'wallet' || nowPayment.group == 'mock'"
                  :formatter="(value: any) => verifyNumberIntegerAndFloat(value)"
                  class="payment-input custom-text-44"
                  ref="inputRef"
                >
                  <template #prepend>
                    <div class="flex items-center">
                      <el-image :src="collection" class="collection-icon" />
                      <span class="custom-text-22 ml-5px">{{ inputLabel }}</span>
                    </div>
                  </template>
                </el-input>
                <el-input
                  v-model="nowPayment.payPrice"
                  v-else
                  :formatter="(value: any) => verifyNumberIntegerAndFloat(value)"
                  class="payment-input custom-text-44"
                  ref="inputRef"
                >
                  <template #prepend>
                    <div class="flex items-center">
                      <el-image :src="collection" class="collection-icon" />
                      <span class="custom-text-22 ml-5px"> {{ inputLabel }}</span>
                    </div>
                  </template>
                </el-input>
              </div>
              <el-divider border-style="dashed" class="m-y-10px!" />
              <div class="flex justify-between w-100% items-center h-40px">
                <div class="custom-text-20" v-if="nowPayment.classify == 'wallet'"
                  >可用余额:￥{{ fenToYuan(nowPayment?.items[0]?.usableBalance || 0) }}</div
                >
                <div v-else> &nbsp; </div>

                <div class="flex">
                  <!-- 支付类型group：
                    inside 资产支付
                    other 线上支付（不可自主取消，可退款处理）
                    mock 虚拟支付（只有一条支付记录，可修改，取消） -->
                  <template v-if="nowPayment.classify == 'wallet' || nowPayment.group == 'mock'">
                    <el-button
                      type="primary"
                      v-if="nowPayment.payPrice != ''"
                      class="custom-text-18 mr-5px!"
                      @click="onCancel"
                      link
                    >
                      取消使用
                    </el-button>
                  </template>
                  <div v-if="!nowPayment.payPrice">
                    <el-button
                      type="primary"
                      class="custom-text-18 mr-5px!"
                      @click="handleAllPay"
                      link
                    >
                      全额支付
                    </el-button>
                  </div>
                </div>
              </div>
              <div class="h-40px my-10px">
                <div
                  v-if="JSON.stringify(nowPayment) != '{}' && nowPayment.items[0]?.pay.length != 0"
                >
                  <el-scrollbar :max-height="'40px'" class="p-x-10px">
                    <div class="mt-2px" v-for="item in nowPayment.items[0].pay" :key="item.assetsId"
                      >支付流水:{{ item.assetsId }} 支付金额: {{ fenToYuan(item.paybalance) }}元
                    </div>
                  </el-scrollbar>
                </div>
              </div>
            </div>

            <div class="flex items-center justify-center" v-if="nowPayment.classify == 'ppc'">
            </div>
            <div class="flex items-center justify-center" v-else>
              <DigitKeyboard
                v-if="!qrCode.visible && !barCode.visible"
                ref="DigitKeyboardRef"
                class="w-100%"
                @on-change="onInputChange"
                @on-confirm="onConfirm"
                @on-cancel="onCancel"
                :input="verifyNumberIntegerAndFloat(nowPayment.payPrice || '')"
              />
              <!-- 扫码区域 -->
              <div v-if="qrCode.visible" class="flex flex-col items-center justify-center">
                <Qrcode :text="qrCode.url" :width="300" />
                <div class="flex">
                  <el-countdown :value="countDownTime" @finish="clearQueryInterval" />
                  <el-button link class="ml-10px" type="danger" @click="clearQueryInterval"
                    >取消支付</el-button
                  >
                </div>
              </div>
              <!-- 条形码区域 -->
              <el-form ref="form" label-width="0" v-if="barCode.visible">
                <el-form-item label="" prop="name" class="mb-5px!">
                  <el-input
                    v-model="barCode.value"
                    placeholder="请输入条形码"
                    class="bardcode-input custom-text-40"
                    required
                    @keydown="handleKeydown"
                  />
                </el-form-item>
                <el-divider class="m-y-0px!" />
                <!-- <div class="flex w-100% justify-end">
                或使用
                <el-link
                  type="danger"
                  target="_blank"
                  href="https://baike.baidu.com/item/条码支付/10711903"
                >
                  (扫码枪/扫码盒)
                </el-link>
                扫码
              </div> -->
                <div class="flex items-center justify-center h-264px">
                  <Icon icon="svg-icon:barCode" :size="180" :color="'var(--el-color-primary)'" />
                </div>
              </el-form>
            </div>
          </div>
        </template>
        <template v-if="JSON.stringify(nowPayment) == '{}'">
          <div class="payment-operation flex-1 justify-center!">
            <el-result title="请左侧选择支付方式进行支付">
              <template #icon>
                <el-image :src="defaultPaymentImg" />
              </template>
            </el-result>
          </div>
        </template>
      </el-main>
    </el-container>
    <template #footer>
      <el-button
        @click="handleNoPay"
        :disabled="sceneType == 'second'"
        v-if="state.orderInfo.price.payPrice > 0"
        plain
        type="danger"
      >
        {{
          state.orderInfo.price.payPrice !== state.orderInfo.price.totalPrice
            ? '部分支付,直接提交'
            : '暂不支付,直接提交'
        }}</el-button
      >
    </template>
  </Dialog>
</template>
<script setup lang="ts">
defineOptions({
  name: 'PayDialog'
})
// 综合支付弹框 服务 销售中使用 部分支付整合 部分支付弹框。
import { propTypes } from '@/utils/propTypes'
import { fenToYuan, yuanToFen } from '@/utils'
import collection from '@/assets/svgs/collection.svg'
// import { DICT_TYPE } from '@/utils/dict'
import DigitKeyboard from './digitKeyBoard.vue' //支付详情
import * as OrderApi from '@/api/shop/trade/order'
import * as PayOrderApi from '@/api/shop/trade/pay'
import defaultPaymentImg from '@/assets/svgs/pay/icon/payment.png'

/** 门店会员信息 */
import { useShopUserStoreWithOut } from '@/store/modules/shop/user'
const shopUserStore = useShopUserStoreWithOut()
import { verifyNumberIntegerAndFloat } from '@/utils/formatter'
const message = useMessage() // 消息弹窗
const dialogTitle = ref('收银台') // 弹窗的标题
// const dialogVisible = ref(false) // 弹窗的是否展示
const maxHeight = ref('600px')
const width = ref('715px') //宽度

const props = defineProps({
  dialogVisible: propTypes.bool.def(false),
  orderInfo: propTypes.object, //订单信息
  paymentMap: propTypes.array,
  no: propTypes.string,
  loading: propTypes.bool.def(false),
  sceneType: propTypes.string.def('first') //'first' 首次支付销售 'second' 二次支付，充值 订单继续支付时的场景 接口不同
})
const state = reactive({
  orderInfo: computed(() => {
    return props.orderInfo
  }), // 支付单信息 as any, // 支付单信息
  payStatus: 0, // 0=检测支付环境, -2=未查询到支付单信息， -1=支付已过期， 1=待支付，2=订单已支付
  paymentMap: computed(() => {
    return props.paymentMap
  }) as any, // 可选的支付方式
  payOrderList: [], //当前支付方式的支付流水号
  isModify: false
})
const emit = defineEmits(['success', 'handleUsePaymentPay', 'handleUse', 'handleNoPay', 'close'])

/** 暂不支付 */
const handleNoPay = () => {
  emit('handleNoPay')
}
/** 选择支付方式 */
const nowPayment = ref<any>({}) //当前操作的支付方式
const nowPaymentIndex = ref<any>() //当前支付方式的下标
const operationOrtherLogic = ref(['ppc', 'coupon', 'cart']) //用户资产
const inputLabel = computed(() => {
  let label = '收款金额'
  console.log(nowPayment.value)

  if (nowPayment.value.classify == 'ppc' || nowPayment.value.classify == 'wallet') {
    label = '使用金额'
  } else if (nowPayment.value.classify == 'change') {
    label = '优惠后金额'
  } else if (nowPayment.value.classify == 'cart') {
    label = '累计抵扣'
  } else if (nowPayment.value.classify == 'points') {
    label = '使用积分'
  }
  return label
})

const selectPayMent = async (index: any) => {
  nowPaymentIndex.value = index
  let item = state.paymentMap[index]
  if (!item.usable) {
    message.error('该支付方式不可用')
  }
  nowPayment.value = item
  clearQueryInterval('select')
  if (operationOrtherLogic.value.includes(nowPayment.value.classify)) {
    // 如果是储值卡 优惠券 资产换购 走其他操作逻辑
    nowPayment.value.payPrice = fenToYuan(nowPayment.value.totalPayPrice)
    emit('handleUse', nowPayment.value)
    return
  }
  if (nowPayment.value.classify == 'wallet') {
    if (nowPayment.value.payStatus) {
      nowPayment.value.payPrice = fenToYuan(nowPayment.value.items[0].paybalance)
    } else {
      nowPayment.value.payPrice = ''
    }
    setKeyBoardLayout()
  }
  if (nowPayment.value.group == 'mock') {
    if (nowPayment.value.payStatus) {
      nowPayment.value.payPrice = fenToYuan(nowPayment.value.items[0].paybalance)
    } else {
      nowPayment.value.payPrice = ''
    }
    setKeyBoardLayout()
  }
}
/**键盘 */
const DigitKeyboardRef = ref()
const onInputChange = (input: any) => {
  nowPayment.value.payPrice = input
} //输入发生变化时
/** 支付信息 提交支付 */
const submitLoading = ref(false) // 提交支付的 loading
const qrCode = ref({
  // 展示形式：二维码
  url: '',
  title: '',
  visible: false
})
const barCode = ref({
  // 展示形式：条形码
  channelCode: '',
  value: '',
  title: '',
  visible: false
})
const onConfirm = () => {
  if (!nowPayment.value.payPrice) {
    message.error('支付金额不能为空')
    return
  }
  if (nowPayment.value.payPrice < 0) {
    message.error('支付金额必须大于0')
    return
  }
  if (operationOrtherLogic.value.includes(nowPayment.value.classify)) {
    return
  } else if (nowPayment.value.classify == 'wallet') {
    let item = nowPayment.value.items[0]
    item.payStatus = true
    item.paybalance = yuanToFen(nowPayment.value.payPrice)
    emit('handleUsePaymentPay', item, nowPayment.value.classify)
    return
  } else {
    // let item = nowPayment.value.items[0]
    // item.payStatus = true
    // emit('handleUsePaymentPay', item, nowPayment.value.classify)

    submit(nowPayment.value.items[0].assetsId)
  }
} //确认当前支付方式
const handleAllPay = () => {
  if (nowPayment.value.group == 'inside') {
    // 如果可用余额大于待支付金额 支付金额就是待支付金额
    if (state.orderInfo.price.payPrice < nowPayment.value!.items[0]!.usableBalance) {
      nowPayment.value.payPrice = fenToYuan(state.orderInfo.price.payPrice)
    } else {
      nowPayment.value.payPrice = fenToYuan(nowPayment.value!.items[0]!.usableBalance)
    }
    return
  }
  nowPayment.value.payPrice = fenToYuan(state.orderInfo.price.payPrice)
  // onConfirm()
}
const onCancel = () => {
  let nowPaymentItem = state.paymentMap[nowPaymentIndex.value]
  nowPayment.value = nowPaymentItem
  nowPayment.value.payPrice = ''
  // 支付类型group： inside 资产字符； other 线上支付（不可自主取消，可退款处理） ；mock 虚拟支付（只有一条支付记录，可修改，取消）
  if (nowPayment.value.group == 'inside') {
    nowPaymentItem.payStatus = false
    let item = nowPaymentItem.items[0]
    item.payStatus = nowPaymentItem.payStatus
    emit('handleUsePaymentPay', item, nowPayment.value.classify)

    return
  } else if (nowPayment.value.group == 'mock') {
    nowPaymentItem.payStatus = false
    let item = nowPaymentItem.items[0]
    item.payStatus = nowPaymentItem.payStatus
    emit('handleUsePaymentPay', item, nowPayment.value.classify)
    return
  }

  DigitKeyboardRef.value?.setKeyBoardLayout('default')
} //取消当前支付方式
import { PayChannelEnum, PayDisplayModeEnum, PayOrderStatusEnum } from '@/utils/constants'
import { cloneDeep } from 'lodash-es'

const submit = (channelCode) => {
  // 条形码支付，需要特殊处理
  if (nowPayment.value.items[0].displayMode === PayDisplayModeEnum.BAR_CODE.mode) {
    displayBarCode(channelCode)
    return
  }

  // 微信公众号、小程序支付，无法在 PC 网页中进行
  if (channelCode === PayChannelEnum.WX_PUB.code) {
    message.error('微信公众号支付：不支持 PC 网站')
    return
  }
  if (channelCode === PayChannelEnum.WX_LITE.code) {
    message.error('微信小程序：不支持 PC 网站')
    return
  }

  // 默认的提交处理
  submit0(channelCode)
}
const submit0 = async (channelCode) => {
  submitLoading.value = true
  try {
    const formData = {
      no: props.no,
      userId: shopUserStore.getUser.id,
      pay: {
        classify: nowPayment.value.classify,
        // payStatus: nowPayment.value.payStatus,
        assetsId: nowPayment.value.items[0].assetsId,
        paybalance: yuanToFen(nowPayment.value.payPrice)
      },
      ...buildSubmitParam()
    }
    let data = {} as any
    if (props.sceneType == 'first') {
      data = await OrderApi.beforeSubmit(formData)
    }
    if (props.sceneType == 'second') {
      let paramsData = cloneDeep(formData) as any
      paramsData.payOrderId = props.orderInfo.payOrderId
      data = await OrderApi.secondSubmit(paramsData)
    }
    // 直接返回已支付的情况，例如说扫码支付
    if (data.status === PayOrderStatusEnum.SUCCESS.status) {
      clearQueryInterval()
      message.success('支付成功！')
      // getAppChannelPayOrderList()
      return
    }
    console.log(data.displayMode)
    // 展示对应的界面
    if (data.displayMode === PayDisplayModeEnum.URL.mode) {
      displayUrl(channelCode, data)
    } else if (data.displayMode === PayDisplayModeEnum.QR_CODE.mode) {
      displayQrCode(channelCode, data)
    } else if (data.displayMode === PayDisplayModeEnum.APP.mode) {
      displayApp(channelCode)
    }

    nowPayment.value.payOrderId = data.id //当前支付的支付单号
    // 打开轮询任务
    createQueryInterval()
  } finally {
    submitLoading.value = false
  }
}
/** 构建提交支付的额外参数 */
const buildSubmitParam = () => {
  if (nowPayment.value.items[0].displayMode === PayDisplayModeEnum.BAR_CODE.mode) {
    return {
      channelExtras: {
        authCode: barCode.value.value
      }
    }
  }

  return {}
}
/** 提交支付前（条形码支付） */
const displayBarCode = (channelCode) => {
  barCode.value = {
    channelCode: channelCode,
    value: '',
    title: '条码支付',
    visible: true
  }
}
/** 提交支付后，URL 的展示形式 */
const displayUrl = (_channelCode, data) => {
  location.href = data.displayContent
  submitLoading.value = false
}

/** 提交支付后（扫码支付） */
const displayQrCode = (channelCode, data) => {
  let title = '请使用手机浏览器“扫一扫”'
  if (channelCode === PayChannelEnum.ALIPAY_WAP.code) {
    // 考虑到 WAP 测试，所以引导手机浏览器搞
  } else if (channelCode.indexOf('alipay_') === 0) {
    title = '请使用支付宝“扫一扫”扫码支付'
  } else if (channelCode.indexOf('wx_') === 0) {
    title = '请使用微信“扫一扫”扫码支付'
  }
  qrCode.value = {
    title: title,
    url: data.displayContent,
    visible: true
  }
  submitLoading.value = false
}

/** 提交支付后（App） */
const displayApp = (channelCode) => {
  if (channelCode === PayChannelEnum.ALIPAY_APP.code) {
    message.error('支付宝 App 支付：无法在网页支付！')
  }
  if (channelCode === PayChannelEnum.WX_APP.code) {
    message.error('微信 App 支付：无法在网页支付！')
  }
  submitLoading.value = false
}
/** 轮询查询任务 */
const interval = ref<any>(undefined) // 定时任务，轮询是否完成支付
const countDownTime = ref(Date.now() + 1000 * 60)
const createQueryInterval = () => {
  if (interval.value) {
    return
  }
  interval.value = setInterval(async () => {
    let paramsData = {
      payOrderId: nowPayment.value.payOrderId,
      channelCode: nowPayment.value.items[0].assetsId,
      sync: true
    }
    const data = await PayOrderApi.getSinglePayOrder(paramsData)

    // 已支付
    if (data.status === PayOrderStatusEnum.SUCCESS.status) {
      clearQueryInterval()
      message.success('支付成功！')
      // await getAppChannelPayOrderList()
    }
    // 已取消
    if (data.status === PayOrderStatusEnum.CLOSED.status) {
      clearQueryInterval()
      message.error('支付已关闭！')
      // await getAppChannelPayOrderList()
      // goReturnUrl('close')
    }
  }, 1000 * 2)
}
/** 清空查询任务 */
const clearQueryInterval = (type?: string) => {
  countDownTime.value = Date.now() + 1000 * 60

  // 清空各种弹窗
  qrCode.value = {
    title: '',
    url: '',
    visible: false
  }
  barCode.value = {
    channelCode: '',
    value: '',
    title: '条码支付',
    visible: false
  }
  // 清空任务
  clearInterval(interval.value)
  interval.value = undefined
  if (type == 'select' && props.sceneType == 'second') {
    // 如果是切换支付方式 并且场景时二次支付时不做处理
  } else {
    // 使用真实支付成功 清除购物车原有的取消信息
    emit('success', nowPayment.value.classify)
  }

  // close()
}

const handleKeydown = (event) => {
  console.log(event)
  // 检查按键是否是回车键（Enter），扫码枪通常会模拟回车键来提交表单
  if (event.key === 'Enter') {
    event.preventDefault() // 阻止回车键的默认行为，即阻止页面刷新
    event.stopPropagation() // 阻止事件冒泡，确保不会触发上层元素的默认行为
    submit0(barCode.value.channelCode)
  }
}

// 监听支付方式的变化
watch(
  () => props.paymentMap,
  () => {
    if (nowPaymentIndex.value == undefined) {
      return
    }
    nowPayment.value = state.paymentMap[nowPaymentIndex.value]
    if (operationOrtherLogic.value.includes(nowPayment.value.classify)) {
      // 如果是储值卡 优惠券 资产换购 走其他操作逻辑
      nowPayment.value.payPrice = fenToYuan(nowPayment.value.totalPayPrice)
      return
    }
    if (nowPayment.value.classify == 'wallet') {
      if (nowPayment.value.payStatus) {
        nowPayment.value.payPrice = fenToYuan(nowPayment.value.items[0].paybalance)
      } else {
        nowPayment.value.payPrice = ''
      }
      setKeyBoardLayout()
    }
    if (nowPayment.value.group == 'mock') {
      if (nowPayment.value.payStatus) {
        nowPayment.value.payPrice = fenToYuan(nowPayment.value.items[0].paybalance)
      } else {
        nowPayment.value.payPrice = ''
      }
      setKeyBoardLayout()
    }
    if (nowPayment.value.group == 'other') {
      DigitKeyboardRef.value.setKeyBoardLayout('default')
    }
  }
)
const setKeyBoardLayout = () => {
  if (nowPayment.value.payStatus) {
    setTimeout(() => {
      DigitKeyboardRef.value.setKeyBoardLayout('cancel')
    }, 100)
  } else {
    setTimeout(() => {
      DigitKeyboardRef.value.setKeyBoardLayout('default')
    }, 100)
  }
}
</script>
<style lang="scss">
.pay-dialog {
  padding-bottom: 10px;
  .#{$elNamespace}-overlay-dialog {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .#{$elNamespace}-dialog {
    margin: 0 !important;

    &__header {
      // height: 54px;
      padding: 0;
      margin-right: 0 !important;
      border-bottom: 1px solid var(--el-border-color);
    }

    &__body {
      padding: 10px 0 !important;
    }

    &__footer {
      border-top: 1px solid var(--el-border-color);
      padding-top: 10px;
    }

    &__headerbtn {
      top: 0;
    }
  }
}
</style>
<style lang="scss" scoped>
:deep(.el-input.is-disabled .el-input__wrapper) {
  background: transparent !important;
}
.aside {
  width: 210px;
}
.main {
  width: 470px;
  display: flex;
  flex-direction: column;
}
:deep(.el-main) {
  --el-main-padding: 0px !important;
  width: 470px;
}
// .payment-item {
//   width: 190px;
//   height: 70px;
//   background: url('@/assets/imgs/payCashier/paymentBg.png') center no-repeat;
//   background-size: 100% 100%;
//   cursor: pointer;
//   display: flex;
//   align-items: center;
//   margin-bottom: 10px;

//   .icon {
//     width: 24px;
//     height: 24px;
//   }

//   .virtual_san {
//     display: none;
//   }

//   .virtual_dui {
//     display: none;
//   }

//   &-active {
//     background: url('@/assets/imgs/payCashier/paymentActive.png') center no-repeat;
//     background-size: 100% 100%;
//     position: relative;

//     .virtual_san {
//       display: block;
//       position: absolute;
//       bottom: 0;
//       right: 0;
//       width: 0;
//       height: 0;
//       border-bottom: 35px solid var(--el-color-primary);
//       border-left: 35px solid transparent;
//       border-bottom-right-radius: 5px;
//     }

//     .virtual_dui {
//       display: block;

//       position: absolute;
//       bottom: -2px;
//       right: 5px;
//       color: #fff;
//       font-family: system-ui;
//     }
//   }
// }
// .payment-info {
//   width: 470px;
//   height: 85px;
//   display: flex;
//   flex-direction: row;
//   justify-content: space-between;
//   align-items: center;
//   background-color: var(--app-content-bg-color) !important;
//   border-radius: 5px;

//   &-item {
//     width: 117.5px;
//     text-align: center;
//   }
// }
// .dark .payment-info {
//   height: 105px;
//   display: flex;
//   flex-direction: row;
//   justify-content: space-between;
//   align-items: center;
//   background-color: var(--el-bg-color-overlay) !important;

//   border-radius: 5px;
// }
// .payment-operation {
//   display: flex;
//   flex-direction: column;
//   justify-content: space-between;
// }
.bardcode-input {
  height: 60px;
  :deep(.el-input__wrapper) {
    box-shadow: none !important;
    border: none !important;
  }
  :deep(.el-input__inner) {
    --el-input-inner-height: 48px;
  }
}
.payment-input {
  height: 60px;

  :deep(.el-input-group__prepend) {
    background: var(--el-color-primary);
    color: #fff;
    padding: 0 10px;
    box-shadow: none;
  }
  :deep(.el-input-group__append) {
    background: var(--el-color-primary);
    color: #fff;
    padding: 0 10px;
    box-shadow: none;
  }

  :deep(.el-input__inner) {
    --el-input-inner-height: 48px;
  }
}

.collection-icon {
  width: 24px;
  height: 24px;
}
</style>
